<template>
	<view class="count p-20">
		<view class="topState b-f p-30 f f-a-c f-j-b b-r-20 m-b-20">
			<view class="state">
				状态
			</view>
			<view class="application">
				{{!userinfo.subscribe?'--':userinfo.subscribe&&userinfo.subscribe.status==1?'待审核':userinfo.subscribe&&userinfo.subscribe.status==2?'审核通过':'已驳回'}}
			</view>
		</view>
		<view class="botBody p-20 b-f b-r-20 p-b-30">
			<view class="topImg f f-a-c">
				<image :src="userinfo.profile.shop.logo" class="imgTu" mode=""></image>
				<view class="rigNam m-l-20">
					<view class="name ">
						{{userinfo.profile.shop.name}}
					</view>
					<view class="address">
						地址：{{userinfo.profile.shop.address}}
					</view>
				</view>
			</view>
			<view class="xian">

			</view>
			<!-- 下面的会员分类 -->
			<view class="classification f f-a-c f-j-b">
				<view class="ficationName">
					会员分类
				</view>
				<view class="setle f f-a-c">
					<view @click="jieyue(1)" class="borrow f f-a-c m-r-40">
						<image src="/static/my/wu.png" v-if="ind==2" class="imgSet" mode=""></image>
						<image src="/static/my/set.png" v-else class="imgSet" mode=""></image>
						<view class="member m-l-10">
							借阅会员
						</view>
					</view>
					<view @click="jieyue(2)" class="borrow f f-a-c">
						<image src="/static/my/wu.png" v-if="ind==1" class="imgSet" mode=""></image>
						<image src="/static/my/set.png" v-else class="imgSet" mode=""></image>
						<view class="member m-l-10">
							读书会会员
						</view>
					</view>
				</view>
			</view>
			<view class="xian"></view>
			<view class="Membership f f-a-c f-j-b">
				<view class="jiBie">
					会员级别
				</view>
				<view @click="shows=true" range-key="name" class="setle f f-a-c">
					{{vip}}
					<image src="/static/my/you.png" class="imageImg m-l-10" mode=""></image>
				</view>
			</view>
			<view class="xian"></view>
			<view @click="show=true" v-if="false" class="Membership f f-a-c f-j-b">
				<view class="jiBie">
					选择有效期
				</view>
				<view class="setle f f-a-c">
					{{time}}
					<image src="/static/my/you.png" class="imageImg m-l-10" mode=""></image>
				</view>
			</view>
		</view>
		<view class="Records">
			<view @click="submitFn" class="btn">
				提交
			</view>
			<view @click="vipShen" class="vipShen f f-a-c f-j-c">
				会员申请记录 <image src="/static/my/you.png" class="rightImg m-l-10" mode=""></image>
			</view>
		</view>
		<!-- 会员等级 -->
		<u-picker v-model="shows" :default-selector="[0]" :range="setup" range-key="name" @confirm="comfigFn"
			mode="selector"></u-picker>
		<!-- 时间 -->

		<u-picker @confirm="confirmFn" mode="time" :params="params" :default-time="defaultTime"
			v-model="show"></u-picker>
		<!-- 这个是内容自己后来添加的内容， -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vip: '请选择会员级别',
				vipId: '',
				setup: uni.getStorageSync('initData').user_levels || [],
				time: '请选择有效期',
				show: false,
				shows: false,
				defaultTime: '2023-07',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				ind: 1,
				userinfo: uni.getStorageSync('userinfo')
			}
		},
		methods: {
			// 点击提交
			async submitFn() {
				let time = +new Date()
				let n = await this.$api.Subscribes({
					identity: this.ind + 1,
					level_id: this.vipId,
					identity_end_at: this.$u.timeFormat(time, 'yyyy-mm-dd')
				})
				this.$msg(n.message)
			},
			// 等级选择
			comfigFn(e) {
				console.log(e, '123456789');
				this.vip = this.setup[e[0]].name
				this.vipId = this.setup[e[0]].id
			},
			// /时间选择
			confirmFn(e) {
				console.log(e);
				this.time = e.year + '-' + e.month + '-' + e.day
			},
			vipShen() {
				uni.navigateTo({
					url: '/pageA/VipRecord'
				})
			},
			jieyue(num) {
				this.ind = num
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Records {
		position: fixed;
		bottom: 150rpx;
		width: 90%;
		margin-left: 2%;

		.vipShen {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #999999;
			margin-top: 30rpx;

			.rightImg {
				width: 10rpx;
				height: 18rpx;
			}
		}

		.btn {
			width: 100%;
			height: 88rpx;
			line-height: 85rpx;
			background: #009d85;
			border-radius: 44rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
	}

	.setle {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #999999;

		.imageImg {
			width: 12rpx;
			height: 24rpx;
		}
	}

	.jiBie {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #333333;
	}

	.ficationName {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;

		.member {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #666666;
		}

	}

	.imgSet {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}

	.xian {
		width: 100%;
		height: 2rpx;
		background-color: #f8f8f8;
		margin: 30rpx 0;
	}

	.topImg {
		.imgTu {
			width: 96rpx;
			height: 96rpx;
			border-radius: 8rpx;
		}

		.name {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}

		.address {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #999999;
			margin-top: 10rpx;
		}
	}

	.topState {
		width: 100%;

		.state {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}

		.application {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #009d85;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #f6f6f6;
	}
</style>